<script setup name="login">
import login_img from "@/assets/image/login.png"
import {reactive, ref} from "vue";
import authHttp from "@/api/authHttp.js";
import {useAuthStore} from "@/stores/auth.js"
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus"
let form = reactive({
  email: "",
  password: "",
})
const authStore = useAuthStore()
const router = useRouter()
const onsubmit = async () => {
  let pwdRgx = /^[0-9a-zA-Z_-]{6,20}/
  let emailRgx = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9])+/
  if (!emailRgx.test(form.email)) {
    ElMessage.info("邮箱格式不满足")
    return;
  }
  if (!pwdRgx.test(form.password)) {
    ElMessage.info('密码格式不正确')
    return;
  }
  // axios.post('http://localhost:8000/auth/login', {
  //   email: form.email, password: form.password
  // }).then(res => {
  //   let data = res.data;
  //   let user = data.user;
  //   let token = data.token;
  //   authStore.setUserToken(user, token);
  //   router.push({name:'frame'});
  //   }
  // ).catch(error => {
  //   let detail = error.response.data.detail;
  //   console.log(error);
  // })
  // 封装后
  // authHttp.login(form.email, form.password).then(response => {
  //     let data = response.data;
  //     let user = data.user;
  //     let token = data.token;
  //     authStore.setUserToken(user, token);
  //     router.push({name:'frame'});
  // }).catch(error => {
  //     let detail = error.response.data.detail;
  //     console.log(error);
  // })
  // 异步改写之后
  try {
    let data = await authHttp.login(form.email, form.password);
    let user = data.user
    let token = data.token
    authStore.setUserToken(user, token);
    ElMessage.success('欢迎登录' + user.realname)
    router.push({name:'frame'});
  }catch (detail) {
    ElMessage.error(detail)
  }
}
</script>

<template>
  <div class="dowebok">
    <div class="container-login100">
      <div class="wrap-login100">
        <div class="login100-pic js-tilt" data-tilt>
          <img :src="login_img" alt="IMG"/>
        </div>
        <form @submit.prevent="onsubmit">
        <div class="login100-form validate-form">
          <span class="login100-form-title"> 员工登陆 </span>

          <div class="wrap-input100 validate-input">
            <input class="input100" type="text" name="email" placeholder="邮箱" v-model="form.email" autocomplete="off"/>
            <span class="focus-input100"></span>
            <span class="symbol-input100">
                            <i class="iconfont icon-fa-envelope" aria-hidden="true"></i>
                        </span>
          </div>

          <div class="wrap-input100 validate-input">
            <input class="input100" type="password" name="password" placeholder="密码" v-model="form.password" autocomplete="off"/>
            <span class="focus-input100"></span>
            <span class="symbol-input100">
                            <i class="iconfont icon-fa-lock" aria-hidden="true"></i>
                        </span>
          </div>

          <div class="container-login100-form-btn">
            <button class="login100-form-btn" type="submit">
              登陆
            </button>
          </div>
        </div>
        </form>
      </div>
    </div>
  </div>
</template>

<style scoped src="@/assets/css/login.css"></style>
<style scoped src="@/assets/iconfont/iconfont.css"></style>